<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/app.css">
		<style>
			.mui-content{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
	        <div class="mui-slider mui-slider-banner">
	          <div class="mui-slider-group mui-slider-loop" id="mui-slider-banner">
	            
	          </div>
	              
	        <!--//轮播图中间底部圆点-->
	          <div class="mui-slider-indicator">
	            
	          </div>
	        </div>
	        <!--
            	作者：767684610@qq.com
            	时间：2017-04-18
            	描述：推荐小组
            -->
	       <div class="mui-slider-content">
	       		<div class="mui-slider-head"><span class="mui-slider-group">推荐小组</span><!--<span class="mui-slider-all mui-zazhi-lookall">查看全部</span>--><div style="clear: both;"></div></div>
		        <div class="am-slide-box mui-zazhi-all">
				    
				</div>
	        </div>
	        <!--
            	作者：767684610@qq.com
            	时间：2017-04-18
            	描述：热门活动
            -->
	        <!--<div class="mui-slider-content mui-hot-active">
	       		<div class="mui-slider-head"><span class="mui-slider-group">热门活动</span><span class="mui-slider-all">查看全部</span><div style="clear: both;"></div></div>
		        <div class="mui-active-content">
				    <div class="mui-active-list">
				    	<div class="mui-active-pic"><img src="../images/list01.png" /></div>
				    	<div class="mui-active-title">
				    		彰显你气质的书
				    		<p>52人参与</p>
				    	</div>
				    </div>
				    <div class="mui-active-list">
				    	<div class="mui-active-pic"><img src="../images/list02.png" /></div>
				    	<div class="mui-active-title">
				    		踏青必备好物
				    		<p>9人参与</p>
				    	</div>
				    </div>
				    <div class="mui-active-list">
				    	<div class="mui-active-pic"><img src="../images/list03.png" /></div>
				    	<div class="mui-active-title">
				    		出门必备好物
				    		<p>28人参与</p>
				    	</div>
				    </div>
				    <div class="mui-active-list">
				    	<div class="mui-active-pic"><img src="../images/list04.png" /></div>
				    	<div class="mui-active-title">
				    		一杯子·一辈子
				    		<p>52人参与</p>
				    	</div>
				    </div>
				    <div style="clear: both;"></div>
				</div>
	        </div>-->
	        
	        
	        
	        
	        <!--<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
					<span class="mui-item-show">最新</span>
			</a>
					<a class="mui-control-item" href="#item2mobile">
					<span class="mui-item-show">热门</span>
			</a>
					<a class="mui-control-item" href="#item3mobile">
					<span class="mui-item-show">关注</span>
			</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第一个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-4 
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-5
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第一个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-4 
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-5
									</li>
								</ul>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第一个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-4 
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-5
									</li>
								</ul>
							</div>
						</div>

					</div>
				</div>
			</div>-->
	        <div id="mui-pullrefresh">
		        <div id="mui-card-list">
		        	
		        </div>
		    </div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>

<script>
	mui.init({
		swipeBack: false
	});
	(function($) {
		$('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条 
		});
		var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-12</li></ul>';
		var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-13</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
		var item1 = document.getElementById('item1mobile');
		var item2 = document.getElementById('item2mobile');
		var item3 = document.getElementById('item3mobile');
		//item1.querySelector('.mui-scroll').innerHTML = html3;
//		document.getElementById('slider').addEventListener('slide', function(e) {
//			if (e.detail.slideNumber === 1) {
//				item2.querySelector('.mui-scroll').innerHTML = html2;
//			}
//			else if (e.detail.slideNumber === 2) {
//				item3.querySelector('.mui-scroll').innerHTML = html3;
//			}
//		});
	})(mui);
</script>
<script>
	ca.init();
	var page = 1;
	var limit = 2;
	var d = true;
	var data = '';
	var term_id = '';
	var is_data = true;
	
	//延时加载
	lazyLoading('mui-content',function(){
		//初始化数据
		init_banner('index_slider');
		//获取推荐小组数据
		get_terms_list(function(){
			//回调注册事件
			var mui_zazhi_list = ca.className('mui-zazhi-list');
			for (var i = 0, length = mui_zazhi_list.length; i < length; i++) { //把每个button元素便利出来
	            var button = mui_zazhi_list[i];
	            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
	                button.addEventListener("tap", add_event_list)
	            } else {
	                button.attachEvent("tap", add_event_list)
	            }
	        }
		});
		get_index_zazhi_list(function(html){
			//添加
			ca.id('mui-card-list').innerHTML = html;
			//回调注册事件
			var mui_card = ca.className('mui-card');
			var mui_card_content = ca.className('mui-card-content');
			var mui_icon_share = ca.className('mui_icon_share');
			var mui_card_like = ca.className('mui-card-like');
			for (var i = 0; i < mui_card.length; i++) { //把每个button元素便利出来
	            var cc = mui_card_content[i];
	            var sb = mui_icon_share[i];
	            var dz = mui_card_like[i];
	            if (cc.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
	                //详情
	                cc.addEventListener("tap", add_event);
	                //分享
	                sb.addEventListener("tap", add_event1);
	                //点赞
	                dz.addEventListener("tap", add_event2);
	            } else {
	            	//详情
	                cc.addEventListener("tap", add_event);
	                //分享
	                sb.addEventListener("tap", add_event1);
	                //点赞
	                dz.addEventListener("tap", add_event2);
	            }
	        }
		});
	},1000);
	var flag = true;
	//触发执行事件   杂志分类
    function add_event_list(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
    	var thisEl = e.currentTarget;
    	var data_id = thisEl.getAttribute('data-id');
    	ca.newInterface({id:'zazhi_list',url:'zazhi_list.html'});
    	//发送通知
    	if(flag){
    		//防止点击过快
    		flag = false;
    		ca.sendNotice('zazhi_list','zazhi_list',{data_id:data_id});
    		setTimeout(function(){flag=true},500);
    	}
    }
	//查看全部
	//ca.className('mui-zazhi-lookall')[0].addEventListener('tap',function(){
		//ca.sendNotice('../index','look_all',{});
		//console.log(11); 
		//plus.webview.show('pages/zazhi.html', 'zoom-fade-out', 300);
	//});
	function get_terms_list(callBack){
		var access_token = localStorage.getItem('access_token');
		var url = request_url+'/api/public/get_terms_list';
		ca.get({
			url:url,
			data:{
				access_token:access_token,
				type_name:'is_rec'
			},
			succFn:function(res){
				var json = JSON.parse(res);
				console.log(res);
				//ca.prompt(json.msg);
				if(json.status == 1){
					var html = '';
					var result = json.result;
					for(var i in result){
						html += '<div class="mui-zazhi-list" data-id="'+result[i].id+'">';
						html += '<div class="slide-item"><img class="lazyloading" data-original="'+result[i].pic+'" src="'+result[i].pic+'" /></div>';
						html += '<p>'+result[i].name+'</p></div>';
					}
					ca.className('mui-zazhi-all')[0].innerHTML = html;
					callBack();
				}
				else{
					ca.prompt(json.msg);
				}
			}
		});
	}
	//获取首页推荐杂志 
	function get_index_zazhi_list(callBack){
		var access_token = localStorage.getItem('access_token');
		var url = request_url+'/api/public/get_posts_list';
		var user_access_token = localStorage.getItem('user_access_token');
		if(!user_access_token){
			user_access_token = '';
		}
		ca.get({
			url:url,
			data:{
				access_token:access_token,
				user_access_token:user_access_token,				
				is_rec:1,
				page:page,
				limit:limit
			},
			succFn:function(res){
				var json = JSON.parse(res);
				//console.log(res);
				if(json.status == 1){
					if(json.result.length <= 0){
						d = false;
						callBack();
						return;
					}
					var html = '';
					var result = json.result;
					console.log(result.length+'-------');
					for(var i in result){
						var mui_active = result[i].posts_likes ? "mui-card-active" : "";
						console.log(mui_active);
						html += '<div class="mui-card" data-id="'+result[i].id+'"><div class="mui-card-content" data-id="'+result[i].id+'">';
						html += '<img src="'+result[i].thumb+'" alt="" width="100%"/><p style="color: #333;">'+result[i].post_title+'</p></div>';
						html += '<div class="mui-card-footer1">';
						html += '<a class="mui-card-link mui-card-like '+mui_active+'" data-id="'+result[i].id+'"><i class="iconfont icon-praise"></i> <span>'+result[i].post_like+'</span><a>';
						html += '<a class="mui-card-link mui_icon_share"><i class="iconfont icon-fenxiang"></i> 分享</a>';
						html += '<a class="mui-card-link mui-card-last">'+result[i].post_hits+' 浏览</a></div></div>';
					}
					//data = html;
					page++;
					d = true;
					is_data = json.result.length < limit ? false : true;
					callBack(html);
				}
				else{
					ca.prompt(json.msg);
				}
			}
		});
	}
	 //上拉加载
	ca.refreshUpLoad('mui-pullrefresh',function(dataState){
		console.log(page);
		if(d){
			setTimeout(function(){
				if(is_data){
					dataState(false);
				}
				else{
					dataState(true);return;
				}
				get_index_zazhi_list(function(html){
					//添加 
					ca.id('mui-card-list').innerHTML += html;
					//回调注册事件 
					var mui_card = ca.className('mui-card');
					var mui_card_content = ca.className('mui-card-content');
					var mui_icon_share = ca.className('mui_icon_share');
					var mui_card_like = ca.className('mui-card-like');
					for (var i = 0; i < mui_card.length; i++) { //把每个button元素便利出来
			            var cc = mui_card_content[i];
			            var sb = mui_icon_share[i];
			            var dz = mui_card_like[i];
			            if (cc.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
			                //详情
			                cc.addEventListener("tap", add_event);
			                //分享
			                sb.addEventListener("tap", add_event1);
			                //点赞
			                dz.addEventListener("tap", add_event2);
			            } else {
			            	//详情
			                cc.addEventListener("tap", add_event);
			                //分享
			                sb.addEventListener("tap", add_event1);
			                //点赞
			                dz.addEventListener("tap", add_event2);
			            }
			        }
			});
			},1000);
		}
		else{
			dataState(true);
		}
	});
	//标记变量，防止点击过快，误操作
    var flag = true;
	//触发执行事件
    function add_event(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素 
    	var thisEl = e.currentTarget;
    	ca.newInterface({id:'zazhi_detail',url:'zazhi_detail.html'});
    	//发送通知
    	if(flag){
    		//防止点击过快
    		flag = false;
    		//获取自定义属性值
    		var data_id = thisEl.attributes['data-id'].value;
    		ca.sendNotice('zazhi_detail','zazhi_info',{object_id:data_id});
    		setTimeout(function(){flag=true},500);
    	}
    }
    //标记变量，防止点击过快，误操作
    var flag1 = true;
    //触发执行事件  分享
    function add_event1(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素 
    	var thisEl = e.currentTarget;
    	//发送通知
    	if(flag1){
    		//防止点击过快
    		flag1 = false;
    		//获取自定义属性值
    		//var data_id = thisEl.attributes['data-id'].value;
    		ca.share({
				shareTitle:'这里是标题',
				shareContent: '这里是内容',
				shareImg:'http://ol.fyitgroup.cn/data/upload/20170419/1.png',
				shareLink:'http://www.baidu.com'
			});
    		setTimeout(function(){flag1=true},500);
    	}
    }
    //标记变量，防止点击过快，误操作
    var flag2 = true;
    //触发执行事件  点赞
    function add_event2(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素 
    	var thisEl = e.currentTarget;
    	//发送通知
    	if(flag2){
    		//防止点击过快
    		flag2 = false;
    		//获取自定义属性值 
    		var user_access_token = localStorage.getItem('user_access_token');
    		if(!user_access_token){
    			ca.newInterface({id:'login',url:'login.html'});return;
    		}
    		var data_id = thisEl.attributes['data-id'].value;
			var access_token = localStorage.getItem('access_token');
			var url = request_url + '/api/oauth/do_posts_likes?access_token='+access_token;
			console.log(url);
			ca.post({
				url:url,
				data:{
					object_id:data_id,
					user_access_token:user_access_token
				},
				succFn:function(res){
					var json = JSON.parse(res);
					console.log(res);
					if(json.status == 1){
						addClass(thisEl,'mui-card-active');
						var posts_likes = thisEl.getElementsByTagName('span')[0].innerText;
						thisEl.getElementsByTagName('span')[0].innerText = parseInt(posts_likes) + 1;
					}
					else{
						ca.prompt(json.msg);
					}
				}
			});    		
    		setTimeout(function(){flag2=true},500);
    	}
    }
    
</script>
<!--<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
	mui.init();
	var createFragment = function(count) {
		var fragment = document.createDocumentFragment();
		var li;
		for (var i = 0; i < count; i++) {
			li = document.createElement('li');
			li.className = 'mui-table-view-cell mui-media';
			li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://ol.fyitgroup.cn/data/upload/20170419/' + (i % 5 + 1) + '.png?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
			fragment.appendChild(li);
		}
		return fragment;
	};
	(function($) {
		var list = document.getElementById("list");
		list.appendChild(createFragment(33));
		$(document).imageLazyload({
			placeholder: '../images/60x60.gif'
		});
	})(mui);
</script>-->
</html>